<template>
  <el-drawer
    :model-value="isDrawerVisible"
    @update:model-value="$emit('close-drawer')"
  >
    <template #header>
      <h4>新建分类</h4>
    </template>
    <template #default>
      <div>
        <el-input v-model="childCategoryModel.name"></el-input>
      </div>
    </template>
    <template #footer>
      <div style="flex: auto">
        <el-button @click="$emit('close-drawer')">取消</el-button>
        <el-button type="primary" @click="confirmClick">保存</el-button>
      </div>
    </template>
  </el-drawer>
</template>

<script setup>
import { ref, watch } from "vue";
import { ElMessageBox } from "element-plus";
import request from "@/utils/request";

const drawer = ref(false);
const props = defineProps({
  isDrawerVisible: {
    type: Boolean,
    required: true,
  },
  categoryModel: {
    type: Object,
    required: false,
  },
});

defineEmits(["close-drawer"]);
const childCategoryModel = ref(props.categoryModel);
watch(
  () => props.categoryModel,
  (newVal) => {
    childCategoryModel.value = newVal;
  }
);

function confirmClick() {
  request.post();
  ElMessageBox.confirm(`确认修改分类码 ?`)
    .then(() => {
      drawer.value = false;
      console.log("categoryModel:", childCategoryModel);
    })
    .catch(() => {
      // catch error
    });
}
</script>
